<template>
	<view class="page-body">
	     <NewCards @noticeLoad='getNoticeData'></NewCards>
		<StatusBar></StatusBar>
		<!-- 	头部开始 -->
		<view class="headerBox " :style="[{height:StatusBar.height+5+'px'}]">
			<view class="head-title " :style="[{height:StatusBar.height+'px'}]" v-for="(head,i) in headList"
				:class="is_follow==i?'head-title-select':'head-title-no'" @click="changeTab(i)">{{head.name}}</view>
			<view class="head-select" :style="[{right:(StatusBar.width+10)+'px',height:StatusBar.height+'px'}]">
				我的校区 <switch class="blue" @change="changeArea" :checked="onlyArea" color="blue"
					style="margin-left: 1vw;"></switch>
			</view>
		</view>
		<!-- 	头部结束 -->
		
		<image src="../../static/img/tabbar/fabu.png" class="fabu-box" mode="widthFix" @click="fabu"></image>

		<!-- 评论区域开始 -->
		<view class="commentBox" :style="{height: swiperHeight+'px'}">
			<mescroll-uni :fixed="false" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"
				v-if="isload" @init="mescrollInit" height="96%">
				<view class="comment-item-box middle" v-for="(item,index) in list" :key="index"
					:style="[{animationDelay:index*0.1+'s'}]" :class="index>0?'margintop1':''">
					<view class="cu-item comment-head vcenter ">
						<view class="cu-avatar round lg" @click="closeComent(index)"
							:style="[{backgroundImage:'url('+item.headimgurl+')'}]">
						</view>
						<view class="comment-head-title" @click="closeComent(index)">
							<view class="user-name text-xxl">{{item.nickname}}</view>
							<view class="text-gray text-sm flex comment-data ">
								{{item.created_at}}
							</view>
						</view>
						<view class="cu-btn shenhe text-red" v-if="item.status==0">
							待审核...
						</view>
						<view class="cu-btn yiguanzhu" @click="follow(item.user_id,index)"
							v-if="item.follow==1 && item.status==1">已关注
						</view>
						<button class="cu-btn round  lines-blue guanzhu" @click="follow(item.user_id,index)"
							v-if="item.follow==0 && item.status==1">关注</button>

					</view>
					<view class="coment-content ">
						<TextOver :content="item.content" fontSize="24" :num="80" :isFixed="false" style="height: 100%;" :type="1">
						</TextOver>
					</view>

					<view class="imgbox ">

						<image mode="aspectFill" :class="item.pics.length>1?'picBox':'picBoxNo'" v-if="img"
							v-for="(img,key) in item.pics" :key="key" :src="img" @click="previewImg(img,item.pics)"
							@error="errorPics(index,key)">
						</image>
						
						<image :class="(item.pics.length>1)?'picBox':'picBoxNo'" class="picBox" mode="aspectFit"
							v-for="(img,key) in item.pics" :key="key" :src="resDomain+'/static/img/error.png'"
							v-if="!img">
						</image>

					</view>

					<view class="comment-foot">
						<view class='cu-tag round comment-foot-tag'>{{item.area.area_name}}</view>
						<view class="comment-foot-right text-gray text-sm text-right">
							<view class="comment-foot-view" @click="praise(item.forum_id,index)">
								<text class="comment-foot-num ">{{count(item.praise_num) || 0}} </text>
								<view class="cuIcon-appreciatefill comment-foot-icon clickEffict " style="color: red;" v-if="item.praise==1">
									<text class="cuIcon-appreciatefill dianzan" v-if="item.isclick" :class="item.praise==1?'fade-out-top':''" style="color: red;"></text>
								</view>
								<view class="cuIcon-appreciate  comment-foot-icon clickEffict" v-else></view>
							</view>

							<view class="comment-foot-view" @click="closeComent(index)">

								<text class="comment-foot-num">{{count(item.reply_num) || 0}}</text>
								<text class="cuIcon-mark comment-foot-icon clickEffict" style="margin-left: 10%;"></text>

							</view>


						</view>
					</view>


				</view>


			</mescroll-uni>

		</view>
		<!-- 评论区域结束 -->

		<!--点击单个评论中全部评论开始 -->
		<view class="comment-secen-box" :animation="animationData" :style="{height:deviceH+'px',bottom:-deviceH+'px'}">

			<view class="mask" @click="closeComent" v-if="isShowComment">

			</view>

			<view class="comment-secend animation-slide-bottom" :style="{height:deviceH*0.8+'px'}">
				<view class="comment-secend-title">
					全部评论
					<text class="text-sm" v-show="foruminfo.replyList">({{foruminfo.replyList.length}})</text>

					<view class="comment-secend-fn" @click="closeComent">
						<text class="cuIcon-close comment-foot-icon clickEffict margin-left"></text>
					</view>
				</view>
				<view class="comment-secend-boxes" :style="{height:deviceH*0.8+'px'}">
					<scroll-view scroll-y="true" :style="{height:deviceH*0.8+'px'}" style="width: 100%;">
						<view class="comment-item-box1   animation-slide-bottom "
							v-for="(reply,index) in foruminfo.replyList" :key="index">
							<view class="cu-item comment-head vcenter ">
								<view class="cu-avatar round lg"
									:style="[{backgroundImage:'url('+reply.headimgurl+')'}]">
								</view>
								<view class=" comment-head-title">
									<view class="user-name">{{reply.nickname || ''}}</view>
									<view class="text-gray text-sm flex justify-between comment-data">
										{{reply.created_at}}
									</view>
								</view>
							</view>

							<view class="secend-comtent">
								<view class="textOver">
									<TextOver :content="reply.reply_content" :num="80" maxHight="200px" :isFixed="false"
										style="height: 100%;" :type="1"></TextOver>
								</view>



							</view>

						</view>
						<view class="noComent" v-if="foruminfo.replyList.length==0">
							<text class="cuIcon-community"></text>

							暂时还没有评论，开始写第一个评论~
						</view>

						<view class="foot">

						</view>
					</scroll-view>
				</view>
			</view>

			<view class="inputbox" :style="{bottom:inputTop+'px'}">
				<input @confirm="apply" :adjust-position="false" v-model="replaycontent" placeholder="点此写评论..."
					class="input-box">
				<button class="cu-btn sm bg-blue search-bottom" @click="apply()">发送</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import MescrollUni from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	import TextOver from '@/components/text-over.vue'
	export default {
		name: "Circle",
		components: {
			MescrollUni,
			TextOver
		},
		props: {
			listen: {
				type: String,
				default: ''
			}
		},
		watch: {
			listen(val) {
				if (this.mescroll && this.isload) {
					this.mescroll.triggerDownScroll();
				}
			}
		},
		data() {
			return {
				currentPage:"circle",
				resDomain: this.resDomain,
				domain: this.apiHost,
				StatusBar: this.Custom,
				WH: this.WH,
				headIndex: 0,
				inputTop: 0,
				isShowComment: false, //是否显示二级评论
				switchA: false, //是否查看校区
				headList: [{
						name: "全部",
						type: 0
					},
					{
						name: "关注",
						type: 1
					}
				],
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 30 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: '-- 没有更多了 --'
				},
				// 内容列表
				current: 0,
				mescroll: null,
				list: [],
				recommList: [],
				onlyArea: true,
				area_id:  uni.getStorageSync('area_id'),
				is_follow: 0,
				userInfo: {},
				index: 0,
				forum_id: 0,
				replylist: [],
				foruminfo: [], //二级评论
				replaycontent: "",
				forum_id_s: "",
				swiperHeight: '',
				isload: false,
				islogin: false,
				deviceH: this.WH,
				animationData: {},
				animation: null,
				forum_id_index:-1,
			}
		},
		mounted() {
			uni.onKeyboardHeightChange(res => {
				console.log("boardHeight: "+res.height);
				(res.height>0)?(()=>{
					this.inputTop = res.height-50;
				})():(()=>{
					this.inputTop = 0;
				})();
				
			});
			this.animation = uni.createAnimation({
				duration: 1000,
				timingFunction: 'ease'
			});
		},
		onShareAppMessage(res) {
			return {
				title: "一舟校园",
				path: '/pages/basic/basic'
			}
		},
		onShow() {
			this.load();
		},
		methods: {
			upDataLogin(){
				
			},
			jumpto(index) {
				uni.navigateTo({
					url: "/pages/circle/circleInfo?id=" + this.list[index].forum_id,

				})
			},
			/**
			 * 时间的格式转换
			 * @param {Object} time
			 */
			changeTime1(time) {
				var d = new Date(time);
				let year1 = parseInt(d.getFullYear() - 1970);
				let year = (year1 == 0) ? "" : year1 + "年";
				var month = parseInt((time / 1000 / 60 / 60 / 24 / 30) % 12); //月
				let mon =(year1>0 || month ==0 )?"": month + "月";
				var day1 = parseInt((time / 1000 / 60 / 60 / 24) % 30); //天数
				let day = (month > 0 || year1 > 0 || day1 == 0) ? "" : day1 + "天";
				var hour = parseInt((time / 1000 / 60 / 60) % 24); //小时
				let hours = (month > 0 || year1 > 0 || day1 > 0 || hour == 0) ? "" : hour + "小时";
				var minute = parseInt((time / 1000 / 60) % 60); //  分钟
				let min = (month > 0 || year1 > 0 || day1 > 0 || minute == 0 || hour > 0) ? "" : minute + "分钟";
				let sec = parseInt((time / 1000) % 60); //秒
				sec = ( month > 0 || year1 > 0 || day1 > 0 || minute > 0 || hour > 0 || sec == 0) ? "" : sec + "秒";
				let array = {
					after: year + mon + day+hours + min + sec + "前"
				}
				return array;
			},
			
			changeTime(time) {
				let end = (new Date(time.replace(/-/g, '/'))).getTime();
				let current = (new Date()).getTime();
				let l =parseInt(current - end);
				return this.changeTime1(l);
			},

			/**
			 * 检查是否登录
			 */
			checkLogin() {
				if (this.islogin) {
					return;
				}
				this.apiRequest('/buyer/userInfo', {
					area_id: uni.getStorageSync('area_id')
				}, 0).then(res => {
					if (res.code == 200) {
						this.islogin = true;
					}
				});
			},
			load() {
				this.isload = true;
				this.getInfo().then((e) => {
					this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height) - 50;
					
				})
				// this.swiperHeight = this.WH - (this.StatusBar.top + this.StatusBar.height) - 50;
				this.userInfo = uni.getStorageSync('userInfo');
				try {
					this.mescroll.resetUpScroll();
				} catch {

				}
			},
			errorPics(index, key) {
				this.$nextTick(() => {
					this.list[index].pics[key] = false;
					this.$set(this.list, index, this.list[index])
				})

			},
			count(num) {
				if (num === 0) {
					num = '';
				} else if (num > 9999 && num <= 9999999) {
					num = parseInt(num / 10000);
					num = parseInt(num) + "万";
				} else if (num > 9999999) {
					num = parseInt(num / 10000000);
					num = parseInt(num) + "千万";
				}
				return num;
			},
			changeTab(is_follow) {
				if (is_follow == 1) {
					this.checkLogin();
				}
				this.is_follow = is_follow;
				this.mescroll.triggerDownScroll();
			},
			follow(follow_user_id, index) {
				this.apiRequest('/buyer/followUser', {
					follow_user_id: follow_user_id
				}, 0).then(res => {
				
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 200) {
						if (this.list[index].follow == 1) {
							this.list[index].follow = 0
						} else {
							this.list[index].follow = 1
						}
					}
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(mescroll) {
				this.list = [];
				mescroll.resetUpScroll()
			},
			upCallback(mescroll) {
				this.apiRequest('/buyer/forumList', {
					area_id: this.area_id,
					page: mescroll.num,
					limit: mescroll.size,
					is_follow: this.is_follow
				}, 0).then(res => {
					if (res.code != 200) {
						mescroll.endSuccess()
					}
					if (mescroll.num == 1) {
						this.list = []
					}
					for (let i in res.data.list) {
						res.data.list[i].isclick=false;
						for (let k in res.data.list[i].pics) {
							let isHttp = res.data.list[i].pics[k].indexOf("https");
							res.data.list[i].pics[k] = res.data.list[i].pics[k];
							if (isHttp == -1) {
								res.data.list[i].pics[k] = this.apiHost + res.data.list[i].pics[k];
							}
						}
					}
					this.list = this.list.concat(res.data.list) //追加新数据
					mescroll.endByPage(this.list.length, res.data.totalPage)
				});
			},
			SwitchA(e) {
				this.switchA = e.detail.value
			},
			praise(forum_id, index) {
				this.apiRequest('/buyer/userPraise', {
					forum_id: forum_id
				}, 0).then(res => {
					if (res.code == 200) {
						if (res.data == 'INC') {
							this.list[index].isclick=true;
							setTimeout(()=>{
								this.list[index].isclick=false;
							},1000);
							
							this.list[index].praise = 1
							this.list[index].praise_num++
						} else {
							this.list[index].praise = 0
							this.list[index].praise_num--
						}
					}
				})
			},
			changeArea(e) {	
				if (this.onlyArea) {
					this.area_id = 0;
					this.mescroll.resetUpScroll();
					this.onlyArea = false;
				} else {
					this.onlyArea = true;
					this.area_id = uni.getStorageSync('area_id');
					if (!this.area_id) {
						uni.showToast({
							title: '请返回首页选择校区',
							icon: 'none'
						})
						setTimeout(function() {
							uni.redirectTo({
								url: '/pages/basic/position'
							});
						}, 1000)
					}
					this.mescroll.resetUpScroll();
				}
			},
			changeTime() {
				let date = new Date(),
					seperator1 = "-",
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					strDate = date.getDate(),
					h = (date.getHours() > 9) ? date.getHours() : "0" + date.getHours(),
					m = (date.getMinutes() > 9) ? date.getMinutes() : "0" + date.getMinutes(),
					s = (date.getSeconds() > 9) ? date.getSeconds() : "0" + date.getSeconds();

				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}

				let currentdate = year + seperator1 + month + seperator1 + strDate + "  " + h + ":" + m + ":" + s;
				return currentdate;
			},
			apply(e) {
				let user = uni.getStorageSync('userInfo');
				let fabu = () => {
					this.foruminfo.replyList.unshift({
						nickname: user.nickname,
						reply_content: this.replaycontent,
						created_at: this.changeTime(),
						headimgurl: user.headimgurl

					})
				}
				this.foruminfo.reply_num++;
				uni.hideKeyboard()
				this.apiRequest('/buyer/userReply', {
					forum_id: this.forum_id_s,
					content: this.replaycontent
				}, 0).then(res => {
					if (res.code == 200) {
						fabu();
						this.list[this.forum_id_index].reply_num=this.foruminfo.reply_num;
						
					}
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			previewImg(src, urls) {
				uni.previewImage({
					current: src,
					urls
				})
			},
			closeComent(index) { //关闭二级评论
				this.checkLogin();
				(this.isShowComment) ? (() => {
					this.isShowComment = false;
					this.closeShowAimation();
				})() : (() => {
					this.foruminfo = [];
					this.showAimation();
					this.forum_id_s = this.list[index].forum_id;
					this.apiRequest('/buyer/forumInfo', {
						forum_id: this.list[index].forum_id,
					}, 1).then(res => {
						if (res.code == 200) {
							this.forum_id_index=index;
							this.foruminfo = res.data;
						}
					})
				})()
			},
			/**
			 * 关闭动画
			 */
			closeShowAimation() {
				this.animation.bottom(-this.deviceH).step({
					duration: 200
				});
				this.animationData = this.animation.export();
			},
			/**
			 * 显示动画
			 */
			showAimation() {
				this.animation.bottom(0).step({
					duration: 500
				});
				this.animationData = this.animation.export();
				setTimeout(() => {
					this.isShowComment = true;
				}, 500)

			},
			fabu(){
				uni.navigateTo({
					url:"./subForum"
				})
			}
			


		}
	}
</script>

<style scoped>
	switch {
		transform: scale(0.7, 0.7);
	}
	.fabu-box{
		width: 72rpx;
		height: auto;
		position: fixed;
		z-index: 9999;
		right: 20rpx;
		bottom: 240rpx;
	}

	.search-bottom {
		height: 80%;
		width: 18%;
		font-size: 30upx;
		margin-left: 1%;
	}

	.headerBox {
		width: 96vw;
		margin-left: 2vw;
		display: flex;
		flex-direction: row;
		justify-content: start;
		position: relative;
	}

	.noComent {
		width: 100%;
		min-height: 150upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		color: #999999;
		flex-wrap: wrap;
	}

	.noComent text {
		width: 100%;
		text-align: center;
		font-size: 60upx;

	}

	.inputbox {
		width: 98vw;
		margin-left: 1vw;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: absolute;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		background: #FFFFFF;
	}

	.input-box {
		width: 80%;
		height: 80%;
		padding-left: 10upx;
		border: 1px solid #E4EDFE;
	}

	.head-title {
		margin-left: 4vw;

	}

	.head-title-select {
		font-size: 40upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.head-title-no {
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.head-select {

		position: absolute;
		float: right;
		height: 80%;
		display: flex;
		align-items: center;
	}

	.commentBox {
		width: 94vw;
		margin: auto;

	}

	.comment-item-box {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		flex-direction: column;

	}

	.margintop1 {
		margin-top: 20upx;
	}

	.imgbox {
		display: flex;
		flex-wrap: wrap;

	}

	.vcenter {
		display: flex;
		align-items: center;
	}

	.comment-head {
		height: 90upx;
		width: 92%;
		margin: 4% auto 0;
		position: relative;

	}

	.coment-content {
		margin-top: 20rpx auto;
		padding-top: 20rpx;
		width: 92%;
		font-size: 24pux;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		padding-bottom: 15upx;

	}

	.comment-foot {
		width: 92%;
		height: 100upx;
		display: flex;
		position: relative;
		flex-direction: row;
		align-items: center;
	}

	.comment-head-title {
		height: 100%;
		margin-left: 10upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: left;
	}

	.comment-head-title view {
		display: flex;
		align-items: center;
	}

	.user-name {
		width: 100%;
		font-size: 32upx;
		font-weight: 800;
		color: #333333;
		height: 50%;
	}

	.comment-data {
		width: 100%;
		height: 50%;
		display: flex;
		align-items: flex-end;
	}

	.comment-foot-tag {
		font-size: 24upx;
		background: #DBEBFF;
		font-weight: 500;
		color: #1270E0;
		max-width: 60%;
		overflow: auto;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-left: 20upx;
		padding-right: 20upx;
		display: block;
		line-height: 48rpx;
		-webkit-overflow-scrolling: touch
	}

	.comment-foot-right {
		position: absolute;
		float: right;
		right: 0;
		display: flex;
		flex-direction: row;
		height: 100%;

	}

	.comment-foot-icon {
		height: 100%;
		display: flex;
		font-size: 45upx;
		color: #DBDBDB;
		align-items: center;
		position: relative;
	}

	.comment-foot-num {
		height: 100%;
		font-size: 28upx;
		margin: 10upx 5upx 0 5upx;
		font-weight: 500;
		color: #333333;
		white-space: nowrap;
		display: flex;
		align-items: center;
		padding-left: 8upx;

	}

	/* 	二级评论样式 */
	.comment-secen-box {
		width: 100vw;
		position: fixed;
		z-index: 9999;
	}

	.mask {
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.5;
		position: absolute;
		top: 0;

	}

	.comment-secend {
		width: 100%;

		position: absolute;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #FFFFFF;
		border-radius: 20upx 20upx 0px 0px;
	}

	.comment-secend-title {

		width: 90%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		font-size: 36upx;
		font-weight: 800;
		color: #333333;
		line-height: 100upx;
		position: relative;
		align-items: center;
	}

	.comment-secend-boxes {
		width: 90%;
		/* 	height: 90vh; */
		display: flex;
		flex-direction: column;
	}

	.comment-item-box1 {
		width: 100%;
		max-height: 500upx;
		margin-top: 20upx;
		background: #FFFFFF;
		flex-direction: column;
		justify-content: center;
		border-top: 1upx solid #F2F2F2;
		position: relative;

	}

	.comment-secend-fn {
		width: 20%;
		position: absolute;
		float: right;
		right: 0;
		display: flex;
		flex-direction: row-reverse;
		height: 100%;
	}

	.guanzhu {
		position: absolute;
		float: right;
		right: 0;
		height: 50upx;
		font-size: 24upx;
	}

	.shenhe {
		position: absolute;
		float: right;
		right: 0;
		height: 50upx;
		font-size: 24upx;
		font-weight: 500;
		background-color: transparent;
	}

	.yiguanzhu {
		position: absolute;
		float: right;
		right: 0;
		height: 50upx;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
		background-color: transparent;
	}

	.forum-pic {
		width: 96%;
		margin-left: 2%;
		display: flex;
		flex-wrap: wrap;
	}

	.forum-pic image {
		width: 90%;
		max-height: 300rpx;
	}

	.forum-pic .show-many {
		width: 150rpx;
		height: 150rpx;
		margin: 10rpx 10rpx 0 0;
		border: 1px solid;
		border-radius: 20upx;
	}

	forum-pic {
		width: 100%;
	}

	.forum-pic image {
		width: 100%;
		margin-top: 20rpx;
	}

	.forum-social {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		line-height: 30rpx;
	}

	.comment-foot-view {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		height: 100upx;
		min-width: 120upx;
		flex-direction: row-reverse;

	}
	.fade-out-top {
		-webkit-animation: fade-out-top 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		        animation: fade-out-top 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	}
	.dianzan{
		position: absolute;
		top: 0;
		left: 0;
	}

	@-webkit-keyframes fade-out-top {
	  0% {
	    -webkit-transform: translateY(0);
	            transform: translateY(0);
	    opacity: 1;
	  }
	  100% {
	    -webkit-transform: translateY(-50px);
	            transform: translateY(-50px);
	    opacity: 0;
	  }
	}
	@keyframes fade-out-top {
	  0% {
	    -webkit-transform: translateY(0);
	            transform: translateY(0);
	    opacity: 1;
	  }
	  100% {
	    -webkit-transform: translateY(-50px);
	            transform: translateY(-50px);
	    opacity: 0;
	  }
	}

</style>


<style lang="scss">
	$width:(750*0.94*0.92-30)/3;
	$imgW:(750*0.94*0.08)/2;


	.imgbox {
		padding-left: $imgW+upx;
		width: 100%;

	}

	.picBox {
		width: $width+upx;
		height: $width+upx;
		border-radius: 20upx;
		object-fit: cover;
		margin: 0upx 10upx 10upx 0upx;
	}

	.picBoxNo {
		// width: calc(100vw*(622/750));
		max-width: 750*0.94-20+upx;
		max-height: 400upx;
		border-radius: 20upx;
		object-fit: cover;
		margin: 10upx 0upx 10upx 0upx;
	}

	.secend-comtent {

		width: 92%;
		margin: auto;
		font-size: 24pux;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-bottom: 15upx;

	}

	.comment-head-title {
		width: 750*0.9*0.92-106+upx;
	}

	.textOver {
		width: 750*0.9*0.92-106+upx;

		margin-left: 106upx;


	}
</style>
